<template>
  <div id="login">
    <div class="bg">
      <img src="../../assets/img/login/login-bg.png" style="width: 100%" />
    </div>

    <div class="logo">
      <img src="../../assets/img/login/logo1.png" style="width: 20vh" />
    </div>

    <!-- 登陆页面 -->
    <div class="main" :style="{ display: showMain }">
      <p class="text1">欢迎使用RFID进销存</p>
      <p class="text2">服装进销存管理系统</p>

      <el-input
        v-model="accountNumber"
        clearable
        key="accountNumber"
        prefix-icon="el-icon-mobile-phone"
        placeholder="请输入手机号或注册编号后六位"
        style="margin-bottom: 20px"
        @blur="accountNumberFin"
        @input="
          () => {
            this.userAccount = ''
            this.userAccountList = []
            this.password = ''
          }
        "
      >
      </el-input>

      <el-select
        v-model="userAccount"
        clearable
        prefix-icon="el-icon-user"
        placeholder="请选择操作员"
        style="width: 100%; margin-bottom: 20px"
      >
        <el-option
          v-for="item in userAccountList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
        <!--  -->
      </el-select>
      <br />

      <el-input
        v-model="password"
        clearable
        key="password"
        type="password"
        prefix-icon="el-icon-lock"
        placeholder="请输入密码"
        style="margin-bottom: 20px"
        @keyup.enter.native="login"
      >
      </el-input>

      <div class="pswBox">
        <el-checkbox v-model="rememberPsw">记住密码</el-checkbox>
        <a href="javascript:;" @click="forgetPswClick">忘记密码</a>
      </div>

      <el-button
        type="primary"
        @click="login"
        style="width: 100%; background-color: #017aff"
      >
        登录
      </el-button>

      <div class="actBox">
        <p>没有账号？</p>
        <a href="javascript:;" @click="registerClick">立即注册</a>
      </div>

      <img src="../../assets/img/login/login-user.png" />
    </div>

    <!-- 忘记密码 -->
    <div class="forgetPsw" :style="{ display: showForgetPsw }">
      <p class="text1">欢迎使用RFID进销存</p>
      <p class="text2">服装进销存管理系统</p>
      <!-- 立即注册的手机号码 -->
      <el-input
        v-model="forgetPhone"
        clearable
        autocomplete="new-password"
        key="forgetPhone"
        prefix-icon="el-icon-mobile-phone"
        placeholder="请输入手机号"
        style="margin-bottom: 20px"
        @blur="forgetPhoneFin"
      >
      </el-input>

      <div class="verify">
        <el-input
          v-model="forgetVerify"
          autocomplete="new-password"
          key="forgetVerify"
          prefix-icon="el-icon-message"
          placeholder="请输入验证码"
          style="margin-bottom: 20px; width: 180px"
        >
        </el-input>
        <button @click="getForgetVerify" ref="forgetGetV">获取验证码</button>
        <!-- <p @click="getForgetVerify" 
          disabled="true"
          style="color:#017aff;display:inline;float:right;line-height:40px;cursor:pointer;">
          获取验证码
        </p> -->
        <!-- <a href="javascript:;" @click="getForgetVerify">获取验证码</a> -->
      </div>

      <el-input
        v-model="forgetPsw"
        autocomplete="new-password"
        key="forgetPsw"
        type="password"
        prefix-icon="el-icon-lock"
        placeholder="请输入密码"
        style="margin-bottom: 20px"
        @blur="forgetPswBlur"
      >
      </el-input>

      <el-input
        v-model="forgetPswAg"
        autocomplete="new-password"
        key="forgetPswAg"
        type="password"
        prefix-icon="el-icon-lock"
        placeholder="请确认密码"
        style="margin-bottom: 20px"
        @keyup.enter.native="changePsw"
      >
      </el-input>

      <el-button
        type="primary"
        @click="changePsw"
        style="width: 100%; background-color: #017aff"
      >
        确定
      </el-button>

      <div class="actBox">
        <p>已有账号？请直接</p>
        <p
          @click="showLogin"
          style="
            color: #017aff;
            display: inline;
            float: right;
            margin-left: 0;
            cursor: pointer;
          "
        >
          登录
        </p>
        <!-- <a href="javascript:;" @click="showLogin">登录</a> -->
      </div>
    </div>

    <!-- 注册 -->
    <div class="register" :style="{ display: showRegister }">
      <p class="text1">欢迎使用RFID进销存</p>
      <p class="text2">服装进销存管理系统</p>

      <div class="inpName">
        <el-input
          v-model="registerName"
          clearable
          autocomplete="new-password"
          key="registerName"
          prefix-icon="el-icon-user"
          placeholder="请输入姓名"
        >
        </el-input>
        <el-radio v-model="gender" label="先生" style="margin-right: 20px"
          >先生</el-radio
        >
        <el-radio v-model="gender" label="女士">女士</el-radio>
      </div>

      <div>
        <el-select
          v-model="version"
          placeholder="请选择版本"
          style="margin-bottom: 10px; width: 180px"
        >
          <el-option
            v-for="item in versionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span
          @click="
            () => {
              this.showVersion = true
            }
          "
          style="cursor: pointer; color: #017aff; margin-left: 26px"
          >查看版本</span
        >
      </div>

      <el-input
        v-model="registerPhone"
        clearable
        autocomplete="new-password"
        key="registerPhone"
        prefix-icon="el-icon-mobile-phone"
        placeholder="请输入手机号"
        style="margin-bottom: 10px"
        @blur="registerPhoneFin"
      >
      </el-input>

      <div class="verify">
        <el-input
          v-model="registerVerify"
          autocomplete="new-password"
          key="registerVerify"
          prefix-icon="el-icon-message"
          placeholder="请输入验证码"
          style="margin-bottom: 10px; width: 180px"
        >
        </el-input>
        <button @click="getRegisterVerify" ref="registerGetV">
          获取验证码
        </button>
      </div>

      <el-input
        v-model="registerPsw"
        autocomplete="new-password"
        key="registerPsw"
        type="password"
        prefix-icon="el-icon-lock"
        placeholder="请输入密码"
        style="margin-bottom: 10px"
        @blur="registerPawBlur"
      >
      </el-input>

      <el-input
        v-model="registerPswAg"
        autocomplete="new-password"
        key="registerPswAg"
        type="password"
        prefix-icon="el-icon-lock"
        placeholder="请确认密码"
        @blur="register"
      >
      </el-input>

      <div class="agreement">
        <el-checkbox v-model="checked"></el-checkbox>
        <p>
          我已同意
          <span @click="showAgreement">用户协议及隐私政策</span>
        </p>
      </div>

      <el-button
        type="primary"
        @click="register"
        style="width: 100%; background-color: #017aff"
      >
        注册
      </el-button>

      <div class="actBox">
        <p>已有账号？请直接</p>
        <p
          @click="showLogin"
          style="
            color: #017aff;
            display: inline;
            float: right;
            margin-left: 0;
            cursor: pointer;
          "
        >
          登录
        </p>
      </div>

      <img src="../../assets/img/login/register-type.png" />
    </div>
    <!-- 这个是版本注册版本服务内容对比 -->
    <div class="versionContrast" v-show="showVersion">
      <i
        class="el-icon-close"
        @click="
          () => {
            this.showVersion = false
          }
        "
      ></i>
      <p>版本服务内容对比</p>
      <p>选择企业版，享受更好更优质的服务</p>
      <el-tabs v-model="activeName">
        <el-tab-pane name="基">
          <!-- 通过插槽里面根据条件显示两张不同的图片 -->
          <span slot="label">
            <img
              src="../../assets/img/login/icon/3452_27.png"
              v-if="activeName == '基'"
            />
            <img src="../../assets/img/login/icon/3452_03.png" v-else />
            基本资料
          </span>
          <!-- 这个是显示表格的插件 -->
          <version-table :versionData="versionData[0]" />
        </el-tab-pane>
        <el-tab-pane name="进">
          <span slot="label">
            <img
              src="../../assets/img/login/icon/3452_28.png"
              v-if="activeName == '进'"
            />
            <img src="../../assets/img/login/icon/3452_05.png" v-else />
            进货管理
          </span>
          <version-table :versionData="versionData[1]" />
        </el-tab-pane>
        <el-tab-pane name="客">
          <span slot="label">
            <img
              src="../../assets/img/login/icon/3452_29.png"
              v-if="activeName == '客'"
            />
            <img src="../../assets/img/login/icon/3452_07.png" v-else />
            客户管理
          </span>
          <version-table :versionData="versionData[2]" />
        </el-tab-pane>
        <el-tab-pane name="库">
          <span slot="label">
            <img
              src="../../assets/img/login/icon/3452_30.png"
              v-if="activeName == '库'"
            />
            <img src="../../assets/img/login/icon/3452_09.png" v-else />
            库存管理
          </span>
          <version-table :versionData="versionData[3]" />
        </el-tab-pane>
        <el-tab-pane name="财">
          <span slot="label">
            <img
              src="../../assets/img/login/icon/3452_31.png"
              v-if="activeName == '财'"
            />
            <img src="../../assets/img/login/icon/3452_11.png" v-else />
            财务管理
          </span>
          <version-table :versionData="versionData[4]" />
        </el-tab-pane>
        <el-tab-pane name="订">
          <span slot="label">
            <img
              src="../../assets/img/login/icon/3452_32.png"
              v-if="activeName == '订'"
            />
            <img src="../../assets/img/login/icon/3452_13.png" v-else />
            订单管理
          </span>
          <version-table :versionData="versionData[5]" />
        </el-tab-pane>
        <el-tab-pane name="店">
          <span slot="label">
            <img
              src="../../assets/img/login/icon/3452_33.png"
              v-if="activeName == '店'"
            />
            <img src="../../assets/img/login/icon/3452_15.png" v-else />
            直营店管理
          </span>
          <version-table :versionData="versionData[6]" />
        </el-tab-pane>
        <el-tab-pane name="系">
          <span slot="label">
            <img
              src="../../assets/img/login/icon/3452_34.png"
              v-if="activeName == '系'"
            />
            <img src="../../assets/img/login/icon/3452_17.png" v-else />
            系统管理
          </span>
          <version-table :versionData="versionData[7]" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
//
import { JSEncrypt } from 'jsencrypt'
//
import {
  isLogin,
  userList,
  smsPhone,
  userRegister,
  smsPassword,
  // 登录请求前获取的加密公钥/随机数（公钥：前端处理后密文传输，随机数：防重放
  get_jia_mi_key,
  // 登录的时候，要封装的加密api
  userLogin
} from '../../network/login'
import { showQuarter } from '../../network/quarter'
import { getShop } from '../../network/shop'

import enterUp from '../../components/mixins/enterUp'
import cookieFn from '../../components/mixins/cookieFn'
import checkPhone from '../../components/mixins/checkPhone'

import versionTable from './childComp/versionTable'

export default {
  mixins: [enterUp, cookieFn, checkPhone],
  data() {
    return {
      // 是不是正在请求
      loading: false,
      inpList: [],
      showMain: 'block',
      accountNumber: '', // 这个是用户输入的手机号
      userAccount: '', // 操作员下拉选中的值
      userAccountList: [], // 操作员下拉选中的数组
      password: '', // 这个是密码
      rememberPsw: false,

      // 忘记密码层需要的信息
      showForgetPsw: 'none',
      forgetPhone: '', // 忘记密码的输入的手机号
      forgetVerify: '', // 忘记密码输入的验证码
      forgetPsw: '', // 忘记密码时候请输入密码
      forgetPswAg: '', // 忘记密码的时候请输入确认密码
      forgetMsgId: '',

      showRegister: 'none', // 控制注册容器是否显示
      registerPhone: '', // 注册的手机号
      registerName: '', // 注册输入的名字
      gender: '先生', // 选择是女士还是先生
      registerVerify: '', // 注册需要的验证码
      registerPsw: '', // 注册的时候需要的密码
      registerPswAg: '', // 注册的时候需要的确认密码
      registerMsgId: '', //
      version: 1,
      versionList: [
        { value: 1, label: '旗舰版' },
        { value: 2, label: '专业版' },
        { value: 3, label: '企业版' }
      ],
      checked: false,

      isRegistered: -1,

      showVersion: false, // 版本的选择是否显示
      activeName: '基', // 控制这个tab展示哪一个的字段
      // 控制表格中的数据
      versionData: [
        // 显示基本资料的数据
        [
          { name: '厂商建档', v1: 1, v2: 1, v3: 1 },
          { name: '品牌建档', v1: 1, v2: 1, v3: 1 },
          { name: '颜色建档', v1: 1, v2: 1, v3: 1 },
          { name: '尺码建档', v1: 1, v2: 1, v3: 1 },
          { name: '品名建档', v1: 1, v2: 1, v3: 1 },
          { name: '附件建档', v1: 0, v2: 1, v3: 1 },
          { name: '成份建档', v1: 0, v2: 1, v3: 1 },
          { name: '仓库建档', v1: 1, v2: 1, v3: 1 },
          { name: '部门建档', v1: 1, v2: 1, v3: 1 },
          { name: '职员建档', v1: 1, v2: 1, v3: 1 },
          { name: '客户建档', v1: 1, v2: 1, v3: 1 },
          { name: '款号建档', v1: 1, v2: 1, v3: 1 },
          { name: '成本建档', v1: 1, v2: 1, v3: 1 },
          { name: '科目建档', v1: 0, v2: 1, v3: 1 },
          { name: '现金银行流量', v1: 0, v2: 1, v3: 1 }
        ],
        // 进货管理的数据
        [
          { name: '厂商进货', v1: 1, v2: 1, v3: 1 },
          { name: '厂商退货', v1: 1, v2: 1, v3: 1 },
          { name: '厂商进销比', v1: 0, v2: 1, v3: 1 },
          { name: '厂商进货查询', v1: 1, v2: 1, v3: 1 },
          { name: '厂商退货查询', v1: 1, v2: 1, v3: 1 },
          { name: '品牌销售查询', v1: 0, v2: 1, v3: 1 }
        ],
        // 客户管理的数据
        [
          { name: '客户进货', v1: 1, v2: 1, v3: 1 },
          { name: '客户退货', v1: 1, v2: 1, v3: 1 },
          { name: '客户销货', v1: 0, v2: 1, v3: 1 },
          { name: '客户配货', v1: 0, v2: 1, v3: 1 },
          { name: '客户返修', v1: 0, v2: 1, v3: 1 },
          { name: '客户调货', v1: 0, v2: 1, v3: 1 },
          { name: '综合查询', v1: 1, v2: 1, v3: 1 },
          { name: '客户进货查询', v1: 1, v2: 1, v3: 1 },
          { name: '客户退货查询', v1: 1, v2: 1, v3: 1 },
          { name: '客户销货查询', v1: 0, v2: 1, v3: 1 },
          { name: '盘点销退货', v1: 0, v2: 1, v3: 1 },
          { name: '未出款查询', v1: 0, v2: 1, v3: 1 },
          { name: '客户销售未补', v1: 0, v2: 1, v3: 1 },
          { name: '销售分析图表', v1: 0, v2: 1, v3: 1 }
        ],
        // 库存管理的数据
        [
          { name: '仓库盘点', v1: 1, v2: 1, v3: 1 },
          { name: '仓库盘差', v1: 1, v2: 1, v3: 1 },
          { name: '仓库调拨', v1: 0, v2: 1, v3: 1 },
          { name: '仓库库存表', v1: 1, v2: 1, v3: 1 },
          { name: '客户库存表', v1: 1, v2: 1, v3: 1 },
          { name: '进销存分析', v1: 0, v2: 1, v3: 1 },
          { name: '仓库盘点查询', v1: 1, v2: 1, v3: 1 },
          { name: '仓库盘差查询', v1: 1, v2: 1, v3: 1 },
          { name: '仓库调拨查询', v1: 0, v2: 1, v3: 1 },
          { name: '货品畅销排行', v1: 1, v2: 1, v3: 1 },
          { name: '进销存总查询', v1: 0, v2: 1, v3: 1 },
          { name: 'RFID跟踪查询', v1: 0, v2: 1, v3: 1 }
        ],
        // 财务管理的数据
        [
          { name: '销售明细汇总', v1: 0, v2: 1, v3: 1 },
          { name: '对账明细总表', v1: 1, v2: 1, v3: 1 },
          { name: '客户收款结账', v1: 0, v2: 1, v3: 1 },
          { name: '寄卖对账单', v1: 0, v2: 1, v3: 1 },
          { name: '客户其他应收', v1: 0, v2: 1, v3: 1 },
          { name: '其他应收查询', v1: 0, v2: 1, v3: 1 },
          { name: '厂商对账单', v1: 1, v2: 1, v3: 1 },
          { name: '月结操作', v1: 1, v2: 1, v3: 1 }
        ],
        // 订单管理的数据
        [
          { name: '客户订货', v1: 0, v2: 1, v3: 1 },
          { name: '客户订货查询', v1: 0, v2: 1, v3: 1 },
          { name: '客户订货合计', v1: 0, v2: 1, v3: 1 },
          { name: '订货未交查询', v1: 0, v2: 1, v3: 1 },
          { name: '厂商订货', v1: 0, v2: 1, v3: 1 },
          { name: '厂商订货查询', v1: 0, v2: 1, v3: 1 },
          { name: '厂商订货合计', v1: 0, v2: 1, v3: 1 },
          { name: '订货明细', v1: 0, v2: 1, v3: 1 }
        ],
        // 直营店管理的数据
        [
          { name: '店铺销售', v1: 0, v2: 0, v3: 1 },
          { name: '店铺盘点', v1: 0, v2: 0, v3: 1 },
          { name: '店铺退货', v1: 0, v2: 0, v3: 1 },
          { name: '客户调货', v1: 0, v2: 0, v3: 1 },
          { name: '库存与调货', v1: 0, v2: 0, v3: 1 },
          { name: 'VIP信息表', v1: 0, v2: 0, v3: 1 },
          { name: '店铺销售查询', v1: 0, v2: 0, v3: 1 },
          { name: '店铺盘点查询', v1: 0, v2: 0, v3: 1 },
          { name: '店铺退货查询', v1: 0, v2: 0, v3: 1 },
          { name: '公司进销存', v1: 0, v2: 0, v3: 1 },
          { name: '业绩积分查询', v1: 0, v2: 0, v3: 1 },
          { name: '综合查询', v1: 0, v2: 0, v3: 1 }
        ],
        // 系统管理的数据
        [
          { name: '系统设置', v1: 1, v2: 1, v3: 1 },
          { name: '权限设置', v1: 1, v2: 1, v3: 1 },
          { name: '季度转换', v1: 1, v2: 1, v3: 1 },
          { name: '操作记录', v1: 1, v2: 1, v3: 1 },
          { name: '条码机测试', v1: 1, v2: 1, v3: 1 },
          { name: '读卡器测试', v1: 1, v2: 1, v3: 1 },
          { name: '修改登录密码', v1: 1, v2: 1, v3: 1 }
          // {name: '错误库存记录', v1: 1, v2: 1, v3: 1}
        ]
      ]
    }
  },
  methods: {
    // ...mapMutations(['changeLogin']),

    // 检查手机号是否注册
    _isLogin(account, fn) {
      // loading 默认为false，在进行校验是否注册的时候，开启loading为true
      if (this.loading) return
      this.loading = true
      // 校验是否已经注册的api
      isLogin({ account }) // 直接传一个对象
        .then((res) => {
          console.log(res, 'isLogin')
          // 返回200，证明已经注册，并且标记为isRegistered = 1
          this.isRegistered = res.data.code == 200 ? 1 : 0
        })
        // 返回的是一个promise对象，所以还是可以调用
        .finally(() => {
          // console.log('已经进来哦')
          // 这个字段的设置只要是为了判断是不是还在请求失去焦点的数据
          this.loading = false
          // 上面逻辑走完之后，再决定是否要调用这个回调函数
          fn()
        })
    },

    // 检查两次密码是否一致
    checkTwoPsw() {
      if (this.registerPsw != this.registerPswAg) {
        this.$message.error('两次密码输入不一致')
        return true
      } else return false
    },

    // 登录页--手机号输入框失去焦点的时候，触发的函数
    accountNumberFin() {
      // console.log(this.accountNumber.length, 'this.accountNumber.length')

      // 登录页的手机号输入框失去焦点的时候，如果用户没有输入11位的手机，那么就清空下拉框的值和数组
      if (this.accountNumber == '') {
        this.userAccount = ''
        this.userAccountList = []
        return
      }
      // 如果输入的是6位数，那么就是输注册编号后六位
      if (this.accountNumber.length == 6) {
        // 那么就拿到账号获取用户的集合
        this.getUserList()
        // checkPhoneNumber() 这个方法定义在了mixins中，用来检测手机号是否合法，合法返回true
      } else if (this.checkPhoneNumber(this.accountNumber)) {
        // 手机号格式正确， 然后调用这个这个方法，来检验手机号是否已经注册
        this._isLogin(this.accountNumber, () => {
          // this.isRegistered 默认值就是-1，不等于-1 证明上面的逻辑已经回调完成，符合调用这个回调函数
          if (this.isRegistered != -1) {
            // 等于0，证明还没有注册
            if (!this.isRegistered) {
              this.$confirm('请检查手机号填写或注册', '手机号未注册', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '去注册',
                type: 'warning'
              }).catch((action) => {
                if (action == 'cancel') {
                  this.showMain = 'none'
                  this.showForgetPsw = 'none'
                  this.showRegister = 'block'
                }
              })
            } else {
              // isRegistered = 1  如果已经注册
              // 那么就拿到账号获取用户的集合
              this.getUserList()
            }
            // 然后要把这个改成-1
            this.isRegistered = -1
          }
        })
      }
    },

    // 拿到操作员列表
    getUserList() {
      this.userAccountList = []
      // 根据账号获取用户集合的api
      userList({ userAccount: this.accountNumber }).then((res) => {
        console.log(res, '拿到操作员列表')
        if (res.data.code == 200) {
          let list = res.data.data
          // console.log(list, 'List')
          if (list.length > 0) {
            for (const item of list) {
              // console.log(item, 'item')
              let tmp = item.split('|')
              // console.log(tmp, 'tmp123')
              // 拿到一个操作员的数组之后，直接push操作员上面去，里面就只能有一项
              this.userAccountList.push({
                label: tmp[0],
                value: tmp[0],
                accountNumber: tmp[1]
              })
            }
          }
        }
      })
    },

    // 点击登录的时候，触发的函数
    async login() {
      // console.log(this.loading, 'loading')
      // this.loading的设计就是为了判断，如果失去焦点拿列表的数据都还没有回来，就不给点击登录
      if (this.loading) return
      // 操作员不能为空
      if (this.userAccount == '') {
        this.$message.error('请选择操作员')
        return
      }
      // 账号或者密码不能为空
      if (this.accountNumber == '' || this.password == '') {
        this.$message.error('账号或密码不能为空')
      } else {
        // 账号和密码不为空的时候，还有判断是6位数的注册编号登录还是手机号码登录
        // 没有加密的参数
        // let params = {}
        // 加密的参数
        let checkGetObj = {}
        if (this.accountNumber.length == 6) {
          let operaterAccount = ''
          // 遍历这个数组
          console.log(this.userAccountList, 'userAccountList')
          for (const i of this.userAccountList) {
            console.log(i, 'i')
            // userAccount 这个是cookie中取出来的,如果userAccount 和item的label找到一样的，那么就取这个label对应的手机号码
            if (i.label == this.userAccount) {
              operaterAccount = i.accountNumber
              // 符合就退出整个循环
              break
            }
          }
          // 拼接要发给后端的参数，那么就取这个label对应的手机号码（原来参数）
          // params = {
          //   accountNumber: operaterAccount,
          //   password: this.password
          // }
          checkGetObj = {
            accountNumber: operaterAccount,
            password: this.password
          }
          // console.log(checkGetObj, '我是6位数里面的代码')
        } else {
          // 否则直接拿输入的就行（原理参数）
          // params = {
          //   accountNumber: this.accountNumber,
          //   password: this.password
          // }
          checkGetObj = {
            accountNumber: this.accountNumber,
            password: this.password
          }
          // console.log(checkGetObj, '我是代码')
        }

        let _this = this
        // 拿到之后，在发起ajax请求之前，要变成true,就是如果数据还没有回来，不能点击登录，（相当于节流）
        this.loading = true

        /*
           新增:登录请求前获取的加密公钥/随机数
        */

        //  这个是请求之前，先把这个账号拿去加密一下 (估计是这里的问题，只拿到前面的第一个输入框的值)
        // checkGetObj = {
        //   accountNumber: this.accountNumber
        // }
        // // 先把账号给后端加密，后端返回一个加密之后的key和随机数
        // console.log(this.password, 'rememberPsw')
        // console.log(checkGetObj, 'checkGetObj')
        const { data: res } = await get_jia_mi_key(checkGetObj)
        // console.log(res, 'get_jia_mi_key')
        // 保存后端返回来的随机数
        let currentrandow = res.data.random
        // console.log(currentrandow, 'currentrandow')
        let encryptor = new JSEncrypt() // 新建JSEncrypt对象
        // console.log(encryptor, 'encryptor')
        // 从后端拿到的加密的key(公钥)，然后进行公钥的设置
        encryptor.setPublicKey(res.data.key)
        // 利用这个公钥，对账号和密码进行加密
        // 对账号进行加密（发的是参数的加密，对什么加密，就传什么的参数）checkGetObj
        let rsaaccountNumber = encryptor.encrypt(checkGetObj.accountNumber)
        // 对密码进行加密（发的是参数的加密）checkGetObj
        let rsaPassWord = encryptor.encrypt(checkGetObj.password)
        // 后端需要的加密参数
        // const jia_mi_paramsObj = {
        //   accountNumber: rsaaccountNumber,
        //   password: rsaPassWord,
        //   randomNumber: currentrandow
        // }
        const jia_mi_paramsObj = {
          accountNumber: rsaaccountNumber,
          password: rsaPassWord,
          randomNumber: currentrandow
        }
        // console.log(jia_mi_paramsObj, 'jia_mi_paramsObj')
        // 原来的
        // userLogin(params)
        //   .then((res) => {
        //     console.log(res, '那么就取这个label对应的手机号码')
        userLogin(jia_mi_paramsObj)
          .then((res) => {
            console.log(res, '那么就取这个label对应的手机号码')
            // 在这个返回的res中，里面子菜单的数据也全部返回
            //  -----------------------------------------
            /*
          直营店可录数据.
          除直营店以外的客户,只能看,不能录数据
          代理商只能查的，不能做销售，退货，调货
          有选客户的地方只有自己

          直营店授权账号 ：只显示直营店模块

          isDirectStore      是否直营店
          isAgent            是否代理商
          */
            if (res.data.code == 200) {
              // console.log(res)
              // 在本地储存角色名称
              localStorage.setItem('whatState', res.data.data.role.roleName)
              // 在本地储存是否为直营店，是的话存的是true, 不是为false
              localStorage.setItem('isStore', res.data.data.isDirectStore)
              // 在本地储存软件客户，就是当前的客户信息对象
              localStorage.setItem(
                'editionData',
                JSON.stringify(res.data.data.softwareCustomer)
              )
              // permissionMap 是一个大对象，里面是键值对的方式，值是子菜单数组
              const permissionMap = res.data.data.permissionMap || {}
              // 下面这个空数组只要是用来存主菜单
              let tmp = []
              // 遍历这个大对象
              for (const key in permissionMap) {
                // call能改变this的指向，call谁，就是谁来用这个方法,这个key是否是permissionMap身上的属性，是的话就true
                if (Object.hasOwnProperty.call(permissionMap, key)) {
                  // element存储所有的子菜单数据（数组）
                  // console.log(key, 'keyvalue')
                  const element = permissionMap[key]
                  // console.log(element, 'element')
                  // k 是主菜单，拿到主菜单
                  const k = key.match(RegExp('permissionName' + '=([^,]+)'))[1]
                  // console.log(k, '启用正则匹配的项目')
                  tmp.push(k)
                  element.forEach((e) => {
                    tmp.push(e.permissionName)
                  })
                }
              }
              // console.log(tmp, 'tmp的最后')

              // 保存操作员 （不能直接修改vuex中的数据）
              this.$store.state.operater = res.data.data.userName

              // 保存token
              this.$store.commit('changeLogin', {
                Authorization: res.data.data.sessionId
              })

              //账号密码正确，保存手机号和操作员cookie
              this.setCookie('jxAccount', this.accountNumber, 30) //保存帐号到cookie，有效期一年
              this.setCookie('jxUser', res.data.data.userName, 30) //保存帐号到cookie，有效期一年
              // 保存软件用户id
              this.setCookie(
                'jxSoftWareCustomerId',
                res.data.data.softwareCustomerId,
                30
              )
              // 设置token的时候，注册的时候，就开始算起
              this.setCookie(
                'jxRegisterTime',
                res.data.data.createTime.slice(0, 10),
                30
              )

              // 设置使用的版本类型，3代表企业版
              this.setCookie(
                'jxVersionType',
                res.data.data.softwareCustomer.versionType,
                30
              )
              // 把菜单在前面和后面都加一个','转成字符串放在cookie上面
              const menuStr = ',' + tmp.toString() + ','
              // console.log(menuStr, 'menuStr')
              this.setCookie('jxMenu', menuStr, 30)

              // 是否直营店  是的话为1， 不是的话为0， 放在cookie上 （后端返回来的是true或者false）
              this.setCookie('jxStore', res.data.data.isDirectStore ? 1 : 0, 30)

              // 是否代理商 是的话为1， 不是的话为0， 放在cookie上 （后端返回来的是true或者false）
              this.setCookie('jxAgent', res.data.data.isAgent ? 1 : 0, 30)
              // 获取对应口令（用于改单，删单......）
              const command = res.data.data.operatoryCommand

              if (command) {
                // 改单口令
                this.setCookie('jxUpdateCommand', command.updateCommand, 30)
                // 删单口令
                this.setCookie('jxDeleteCommand', command.deleteCommand, 30)
                // 改补删单
                this.setCookie('jxChangeOrder', command.changeOrder, 30)
                // 月结
                this.setCookie('jxMonthly', command.monthly, 30)
                // 收货权限
                this.setCookie('jxReceive', command.receivingPermission, 30)
                // 出货金额有效
                this.setCookie(
                  'jxShippingAmount',
                  command.shippingAmountIsValid,
                  30
                )
                // 查看成本  不能看成本建档不能改货号售价
                this.setCookie('jxShowCost', command.showCost, 30)
                // 导出客户资料
                this.setCookie('jxOutCusInfo', command.importCustomerInfo, 30)
                // 部门主管
                this.setCookie('jxPrincipal', command.isPrincipal || '', 30)
              } else {
                // 如果返回的command是空的话，那么就直接删除在本地这些存储
                this.delCookie('jxUpdateCommand')
                this.delCookie('jxDeleteCommand')
                this.delCookie('jxChangeOrder')
                this.delCookie('jxMonthly')
                this.delCookie('jxReceive')
                this.delCookie('jxShippingAmount')
                this.delCookie('jxShowCost')
                this.delCookie('jxOutCusInfo')
                this.delCookie('jxPrincipal')
              }

              // 是否已授权   0 没授权   1 授权
              this.setCookie(
                'jxAu',
                // 本地存储已经有一份了，这是放在cookie上
                res.data.data.softwareCustomer.authorization,
                3
              )
              // 过期时间
              this.setCookie(
                'jxET',
                res.data.data.softwareCustomer.endTime.slice(0, 10),
                3
              )

              //账号密码正确，（rememberPsw判断用户是否在勾选记住密码的复选框）
              if (this.rememberPsw) {
                // 如果复选框是勾选状态则保存密码cookie
                if (this.getCookie('jxPsw') != this.password) {
                  this.setCookie('jxPsw', this.password, 0.5) //保存密码到cookie，有效期半天

                  let userAgent = navigator.userAgent //取得浏览器的userAgent字符串
                  console.log(userAgent, 'userAgent')
                  if (userAgent.indexOf('Firefox') > -1) {
                    //判断是否Firefox浏览器,火狐浏览器设置0.5不保存cookie
                    this.setCookie('jxPsw', this.password, 1) //保存密码到cookie，有效期1天
                  }
                }
              } else {
                //复选框勾选为false时，清除cookie
                this.delCookie('jxPsw')
              }
              // 判断是否为直营店或者代理商
              if (res.data.data.isDirectStore || res.data.data.isAgent) {
                // 直营店不看首页，直接看店铺销售
                this.$router.push('/stores/store_sales_s') // 如果是直营店或者代理商，直接跳转到直营店
                this.$store.commit('store') // 让导航栏显示这个
                //获取客户编号 （直营店类型当前客户）
                getShop().then((res) => {
                  console.log(res.data) // 获取当前登录客户的数据

                  // localStorage.setItem(
                  //   'currentStoreData',
                  //   JSON.stringify(res.data)
                  // )
                  // 把当前的直营店数据存在vuex中
                  this.$store.commit('keepCurrentStoreData', res.data.data)
                  this.setCookie('jxStoreNo', res.data.data.no, 3) // 把直营店编号放在cookie上
                })
              } else {
                // 不是直营店的话，直接跳到首页，并且删除cookie中的直营店编号
                this.$router.push('/home')
                this.delCookie('jxStoreNo')
              }
              // 显示在底部默认季节的api
              showQuarter().then((res) => {
                console.log(res, 'showQuarter')
                // _this.delCookie('jxQuarter')
                if (res.data.data) {
                  _this.setCookie('jxQuarter', res.data.data, 1) //保存密码到cookie，有效期1天
                } else {
                  // 如果没有默认字节的话，那么就直接拿当前年份+春夏
                  let quarterStr =
                    String(new Date().getFullYear()).substr(2, 2) + '春夏' // 只要年份后面两位
                  // console.log(quarterStr, 'showQuarter')
                  _this.setCookie('jxQuarter', quarterStr, 1) //保存密码到cookie，有效期1天
                }
              })
              // 如果用户已经过了有效期，直接跳转到充值中心
              if (res.data.data.isExpired) {
                this.$message.error('用户试用期已过期')
                this.$router.push('/peningservice/opening_service')
                this.$store.commit('addNav', {
                  label: '开通服务',
                  name: 'opening_service'
                })
                this.setCookie('jxIsExpired', true, 30)
              } else {
                this.delCookie('jxIsExpired')
              }
            }
          })
          .finally(() => {
            this.loading = false
          })
      }
    },

    // 点击登录页的立即注册，触发的函数
    registerClick() {
      this.showMain = 'none' // 让登录页面隐藏
      this.showForgetPsw = 'none' // 让忘记密码页面隐藏
      this.showRegister = 'block' // 显示注册页面
    },
    // 点击登录页忘记密码
    forgetPswClick() {
      this.showMain = 'none' // 让登录页面隐藏
      this.showForgetPsw = 'block' // 让忘记密码页面显示
      this.showRegister = 'none' // 让注册页面隐藏
    },
    // 点击注册、忘记密码页登录
    showLogin() {
      this.showMain = 'block' // 让登录页面显示
      this.showForgetPsw = 'none' // 让忘记密码页面隐藏
      this.showRegister = 'none' // 让注册页面也隐藏
    },

    // 注册页--手机号失去焦点
    registerPhoneFin() {
      //判断手机号格式是否正确
      if (this.checkPhoneNumber(this.registerPhone)) {
        //调用这个方法，检测这个手机号是否被注册
        this._isLogin(this.registerPhone, () => {
          if (this.isRegistered == 1) {
            console.log(this.isRegistered)
            this.$confirm('请登录或修改密码', '手机号已注册', {
              distinguishCancelAndClose: true,
              confirmButtonText: '登录',
              cancelButtonText: '修改密码',
              type: 'warning'
            })
              .then(() => {
                this.showMain = 'block'
                this.showForgetPsw = 'none'
                this.showRegister = 'none'
              })
              .catch((action) => {
                if (action == 'cancel') {
                  this.showMain = 'none'
                  this.showForgetPsw = 'block'
                  this.showRegister = 'none'
                }
              })
          }
        })
        this.isRegistered = -1
      }
    },
    // 注册页--第一个密码框失去焦点
    registerPawBlur() {
      if (this.registerPsw.length < 6) {
        this.$message.error('密码最少为6位')
        return false
      }
      return true
    },

    // 获取注册验证码
    getRegisterVerify() {
      if (this.loading) return
      if (this.registerPhone == '') {
        this.$message.error('手机号不能为空')
        return
      } else if (!this.checkPhoneNumber(this.registerPhone)) {
        return
      } else {
        let that = this.$refs.registerGetV
        let count = 60
        let timer
        if (timer) {
          clearInterval(timer)
        }
        timer = setInterval(() => {
          if (count > 0) {
            count--
            that.disabled = true //disabled禁用input属性，此时无法点击
            that.innerHTML = count + ' s后重新获取'
            that.style.cursor = 'wait' //系统默认的箭头表示
            that.style.color = '#A8ABAD'
          } else {
            clearInterval(timer)
            that.innerHTML = '获取验证码'
            that.disabled = false //可点击
            that.style = {} //此时将cursor和background都设置成原来的格式
            count = 60 //重置计数器
          }
        }, 1000)

        let params = {
          accountNumber: this.registerPhone,
          flag: true
        }
        this.loading = true
        smsPhone(params)
          .then((res) => {
            this.registerMsgId = res.data.data
          })
          .finally(() => {
            this.loading = false
          })
      }
    },

    // 注册
    register() {
      if (this.loading) return
      if (!this.checked) {
        this.$alert('请阅读并同意嘉伈软件用户协议，方可注册', '', {
          confirmButtonText: '确定'
        })
        return
      }
      if (this.registerName == '') {
        this.$message.error('请输入称呼')
        return
      } else if (this.registerPhone == '') {
        this.$message.error('手机号不能为空')
        return
      } else if (this.registerVerify == '') {
        this.$message.error('验证码不能为空')
        return
      } else if (this.registerPsw == '') {
        this.$message.error('密码不能为空')
        return
      } else if (this.registerPswAg == '') {
        this.$message.error('请确认密码')
        return
      } else if (!this.registerPawBlur()) {
        // console.log('第一个密码少于六位')
        return
      } else if (this.checkTwoPsw()) {
        // console.log('')
        return
      }
      // 刚开始只能注册旗舰版
      if (this.version != 1) {
        this.$alert('只能注册旗舰版', '', {
          confirmButtonText: '确定'
        })
        return
      }
      // 注册的时候，后端需要的参数对象
      let params = {
        userName: this.registerName + this.gender,
        accountNumber: this.registerPhone,
        code: this.registerVerify,
        msgId: this.registerMsgId,
        password: this.registerPsw,
        versionType: this.version
      }
      // console.log(params)
      this.loading = true
      // 发起用户注册的api
      userRegister(params)
        .then((res) => {
          console.log(res)
          // console.log('注册链接成功')
          if (res.data.code == 200) {
            this.$message({
              message: '注册成功',
              type: 'success'
            })
            // 注册成功之后，先删除原来的记录的用户名字，然后再从新保存
            this.delCookie('jxAccount')
            this.setCookie('jxAccount', this.registerPhone, 30) //保存帐号到cookie，有效期一年
            this.accountNumber = this.registerPhone
            this.userAccount = this.registerName + this.gender
            this.password = this.registerPsw
            this.login()
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 用户协议及隐私政策
    showAgreement() {
      window.open(
        'https://carxin.oss-cn-beijing.aliyuncs.com/carxinSystem/protocol/嘉伈软件订购及服务协议.pdf',
        '嘉伈软件用户协议'
      )
      // window.open('src/assets/嘉伈软件订购及服务协议.pdf', '嘉伈软件用户协议')
    },

    // 忘记密码--手机号失去焦点
    forgetPhoneFin() {
      // 先判断手机号码格式是否正确
      if (this.checkPhoneNumber(this.forgetPhone)) {
        // 检测这个手机号码是否被注册
        this._isLogin(this.forgetPhone, () => {
          if (!this.isRegistered) {
            this.$confirm('请检查手机号填写或注册', '手机号未注册', {
              distinguishCancelAndClose: true,
              confirmButtonText: '确定',
              cancelButtonText: '去注册',
              type: 'warning'
            }).catch((action) => {
              if (action == 'cancel') {
                this.showMain = 'none'
                this.showForgetPsw = 'none'
                this.showRegister = 'block'
              }
            })
          }
        })
        this.isRegistered = -1
      }
    },
    // 输入的密码小于6位，之间return
    forgetPswBlur() {
      if (this.forgetPsw.length < 6) {
        return false
      }
      return true
    },
    // 获取忘记密码验证码
    getForgetVerify() {
      // console.log('忘记密码获取验证码')
      if (this.forgetPhone == '') {
        this.$message.error('手机号不能为空', '', {
          confirmButtonText: '确定'
        })
        return
      } else if (!this.checkPhoneNumber(this.forgetPhone)) {
        return
      } else {
        let that = this.$refs.forgetGetV
        let count = 60
        let timer
        if (timer) {
          clearInterval(timer)
        }
        timer = setInterval(() => {
          if (count > 0) {
            count--
            that.disabled = true //disabled禁用input属性，此时无法点击
            that.innerHTML = count + ' s后重新获取'
            that.style.cursor = 'wait' //系统默认的箭头表示
            that.style.color = '#A8ABAD'
          } else {
            clearInterval(timer)
            that.innerHTML = '获取验证码'
            that.disabled = false //可点击
            that.style = {} //此时将cursor和background都设置成原来的格式
            count = 60 //重置计数器
          }
        }, 1000)

        let params = {
          accountNumber: this.forgetPhone,
          flag: false
        }
        smsPhone(params).then((res) => {
          // console.log('发送验证码成功')
          this.forgetMsgId = res.data.data
          // console.log(res)
        })
      }
    },

    // 修改密码   （用户在输入确认密码的时候，之间按下回车的时候，触发这个函数）
    changePsw() {
      if (this.loading) return
      // console.log('点击确定了')
      if (this.forgetPhone == '') {
        this.$alert('手机号不能为空', '', {
          confirmButtonText: '确定'
        })
        return
      } else if (this.forgetVerify == '') {
        this.$alert('验证码不能为空', '', {
          confirmButtonText: '确定'
        })
        return
      } else if (this.forgetPsw == '') {
        this.$alert('密码不能为空', '', {
          confirmButtonText: '确定'
        })
        return
      } else if (this.forgetPswAg == '') {
        this.$alert('请确认密码', '', {
          confirmButtonText: '确定'
        })
        return
      } else if (!this.forgetPswBlur()) {
        return
      } else if (this.checkTwoPsw()) {
        return
      }
      console.log('点击确定了')
      // 拼接后端需要的参数对象
      let params = {
        accountNumber: this.forgetPhone,
        code: this.forgetVerify,
        newPassWord: this.forgetPsw,
        msgId: this.forgetMsgId
      }
      this.loading = true
      // 这个是在忘记密码页面，重新修改密码的api
      smsPassword(params)
        .then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            // this.$alert('将跳转到登录界面', '密码修改成功', {
            //   confirmButtonText: '确定'
            // })
            this.$message({
              message: '密码修改成功，将跳转到登录界面',
              type: 'success'
            })
            this.delCookie('jxAccount')
            this.delCookie('jxUser')
            this.delCookie('jxPsw')
            this.setCookie('jxAccount', this.forgetPhone, 30) //保存帐号到cookie，有效期一年

            this.accountNumber = this.forgetPhone
            this.userAccount = ''
            this.password = ''
            this.rememberPsw = false

            this.forgetPhone = ''
            this.forgetVerify = ''
            this.forgetPsw = ''
            this.forgetPswAg = ''
            this.forgetMsgId = ''

            this.showLogin()
            this.getUserList()
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  created() {
    // console.log('log')
    //页面初始化时，如果帐号密码cookie存在则填充
    // console.log(this.getCookie('jxAccount'))
    // console.log(this.getCookie('jxUser'))
    // console.log(this.getCookie('jxPsw'))
    // 在cookie中取相应的账号和名称
    this.accountNumber = this.getCookie('jxAccount')
    this.userAccount = this.getCookie('jxUser')
    // this.$nextTick(() => {
    //   // console.log(this.userAccount, 'userAccount')
    //   // console.log(this.accountNumber, 'accountNumber')
    // })
    if (this.getCookie('jxPsw')) {
      this.password = this.getCookie('jxPsw')
      this.rememberPsw = true
    }

    this.getUserList()
    this.inpList = this.getInput()
  },
  watch: {
    // showMain(a,b){
    //   if(a == 'block'){
    //     this.accountNumber = this.getCookie('jxAccount')
    //   }
    // }
  },
  components: { versionTable }
}
</script>

<style scoped>
.logo {
  position: absolute;
  top: 70px;
  right: 330px;
}
.bg {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fbfbfd;
  background-size: cover;
  z-index: -9;
  zoom: 1;
}
.main img {
  position: relative;
  top: -218px;
  left: 11px;
  width: 14px;
  height: 14px;
}
.main,
.register,
.forgetPsw {
  position: absolute;
  top: 300px;
  right: 200px;
  height: 500px;
  width: 450px;
  padding: 64px 77px 0 77px;
  border-radius: 10px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 6px 6px 10px 1px rgb(200, 200, 200);
}
.register {
  height: 580px;
}
.text1,
.text2 {
  line-height: 0;
  color: #017aff;
  text-align: center;
}
.main .text1,
.register .text1,
.forgetPsw .text1 {
  font-size: 32px;
  margin-bottom: 48px;
  white-space: nowrap;
}
.main .text2,
.register .text2,
.forgetPsw .text2 {
  font-size: 22px;
  margin-bottom: 50px;
}

.main a,
.register a,
.forgetPsw a {
  text-decoration: none;
  color: #017aff;
  float: right;
}
.main .pswBox,
.register .pswBox,
.forgetPsw .pswBox {
  margin-bottom: 10px;
}
.main .actBox p {
  margin-left: 150px;
  display: inline;
}
.register .actBox p,
.forgetPsw .actBox p {
  margin-left: 130px;
  display: inline;
}
.main .actBox,
.register .actBox,
.forgetPsw .actBox {
  margin-top: 20px;
}

.register img {
  position: relative;
  top: -340px;
  left: 11px;
  width: 14px;
  height: 14px;
}

.register .agreement {
  display: flex;
  line-height: 36px;
}
.agreement span {
  color: #017aff;
  cursor: pointer;
}
.agreement p {
  margin-left: 10px;
}

.verify a {
  margin-top: 10px;
}

.verify button {
  width: 120px;
  height: 40px;
  border: none;
  outline: none;
  background: #fff;
  position: absolute;
  cursor: pointer;
  color: #017aff;
  font: 12px;
}

.versionContrast {
  text-align: center;
  /* width: 1000px;
    height: 300px; */
  background-color: white;
  position: fixed;
  top: 10%;
  right: 50%;
  /* transform: translateX(50%); */
  z-index: 9;
  border-radius: 10px;
  box-shadow: 6px 6px 10px 1px rgb(200, 200, 200);
  padding: 20px;
}
.versionContrast i:first-child {
  position: absolute;
  right: 20px;
  font-size: 30px;
  cursor: pointer;
}
.versionContrast p:nth-child(2) {
  font-weight: bold;
  font-size: 32px;
}
.versionContrast p:nth-child(3) {
  padding-bottom: 10px;
}
.versionContrast img {
  display: block;
  margin: 0 auto;
}
</style>

<style>
.login .el-select .el-input .el-select__caret {
  font-size: 20px;
  margin-right: 6px;
  float: right;
}
.main .el-input__inner {
  padding-left: 30px !important;
}
.login .el-input__icon {
  color: #aaa;
}
.register .el-select {
  width: 100%;
  margin-bottom: 10px;
}
.register .el-select .el-input__inner {
  padding-left: 30px !important;
}
</style>
